<fieldset class="layui-elem-field layui-field-title">
  <legend>添加分类</legend>
</fieldset>

<form class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">分类名称</label>
		<div class="layui-input-inline">
			<input type="text" name="name" class="layui-input" placeholder="请输入分类名" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">父分类</label>
		<div class="layui-input-inline">
			<select name="parent"></select>
		</div>
	</div>
	
	<div class="layui-form-item">
		<input type="hidden" name="picture" />
		<label class="layui-form-label">分类图片</label>
		<div class="layui-input-inline">
			<!-- 使用layui的上传图片的插件 -->
			<div class="layui-upload">
			  <button type="button" class="layui-btn" id="test1">上传图片</button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo1" style="width: 92px; height: 92px;">
			    <p id="demoText"></p>
			  </div>
			  <div style="width: 95px;">
			    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
			      <div class="layui-progress-bar" lay-percent=""></div>
			    </div>
			  </div>
			</div>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<div class="layui-input-inline">
			<button type="submit" class="layui-btn layui-btn-danger" 
				lay-submit lay-filter="add">添加分类</button>
		</div>
	</div>
	
</form>

<script type="text/javascript">
	layui.use(['form', 'upload', 'element'], function(){
		var form = layui.form;
		var upload = layui.upload;
		var element = layui.element;
		
		// 获取当前的token, 在请求时, 添加到请求头中
		var token = getCookie("token");
		
		// 获取一级分类
		$.ajax({
			headers:{token: token},	// 请求时, 将token添加到请求头中
			url: '/adminServer/api/goodsSorts',
			type: 'get',
			data: {},
			dataType: 'json',
			success: function(data){
				
				if (data.status == 200){
					var html = "<option value=''>请选择父分类</option>";
					$.each(data.data.list, function(index, item){
						html += "<option value='"+item.id+"'>"+item.name+"</option>";
					});
					$("select[name='parent']").html(html);
					
					// 渲染表单
					form.render();
				}
			},
			error: function(){
				
			}
		});
		
		//常规使用 - 普通图片上传
		  var uploadInst = upload.render({
		    elem: '#test1'
		    ,url: '/adminServer/api/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      obj.preview(function(index, file, result){
		        $('#demo1').attr('src', result); //图片链接（base64）
		      });
		      
		      element.progress('demo', '0%'); //进度条复位
		      layer.msg('上传中', {icon: 16, time: 0});
		    }
		    ,done: function(res){
		      //如果上传失败
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }
		      //上传成功的一些操作
			  $("input[name='picture']").val(res.data);
		      //……
		      $('#demoText').html(''); //置空上传失败的状态
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		    //进度条
		    ,progress: function(n, elem, e){
		      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
		      if(n == 100){
		        layer.msg('上传完毕', {icon: 1});
		      }
		    }
		  });
		
		// 表单提交
		form.on('submit(add)', function(data){
			
			$.ajax({
				url: '/adminServer/api/goodsSorts',
				type: 'post',
				data: JSON.stringify(data.field),
				contentType: 'application/json; charset=utf-8',
				dataType: 'json',
				success: function(data){
					if (data.status==201){
						// 跳转页面
						gotoUrl("sort/list.html");
					} else {
						layer.msg(data.msg);
					}
				},
				error: function(){					
				}
			});
			
			return false;
		});
	});
</script>
